import React from 'react';
import {View, Text, TextInput, StyleSheet, Button, Alert} from 'react-native';
// import {
//   NavigationProp,
//   NavigationContainerProps,
// } from '@react-navigation/native';
// import {RootStackParamList, TabParamList} from '../../routes/index';
import Api from '../../apis/Api';

type Props = {
  navigation: any;
};

export default function LoginScreen({navigation}: Props): React.JSX.Element {
  // setTimeout(() => {
  //   navigation.navigate("TabBar", { screen: "New" })
  // }, 1000);
  const [username, onChangeUsername] = React.useState('');
  const [password, onChangePassword] = React.useState('');

  async function onSubmit() {
    // if ( !username || !password) {
    //   Alert.alert(
    //     '警告',
    //     '请先填写账号、密码'
    //   )

    // }
    navigation.navigate('TabBar', {screen: 'Home'});
  }

  return (
    <View style={{flex: 1, alignItems: 'center'}}>
      <Text>账号密码登录</Text>
      <View style={styles.flexRow}>
        <Text>账号</Text>
        <TextInput
          style={{flex: 1, height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={text => onChangeUsername(text)}
          value={username}
        />
      </View>
      <View style={styles.flexRow}>
        <Text>账号</Text>
        <TextInput
          style={{flex: 1, height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={text => onChangePassword(text)}
          value={password}
        />
      </View>
      <Button onPress={onSubmit} title="跳转主页" color="green" />
    </View>
  );
}

const styles = StyleSheet.create({
  flexRow: {
    width: 200,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
});
